{% extends 'generic/object_create.html' %}
{% load form_helpers %}

{% block form %}
    <div class="card">
        <div class="card-header"><strong>Secret</strong></div>
        <div class="card-body">
            {% render_field form.name %}
            {% render_field form.description %}
            {% render_field form.provider %}
        </div>
    </div>
    <div class="card">
        <div class="card-header"><strong>Parameters</strong></div>
        <div class="card-body">
            <span class="form-text mb-12">
                All parameter values can be entered as Jinja2 templates if desired.
                The requesting object (device, Git repository, etc.), if any, will be provided
                as context variable <code>obj</code>.
            </span>
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="nav-item">
                    <a class="nav-link active" href="#parameters_form" role="tab" data-bs-toggle="tab">Form</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" href="#parameters_json" role="tab" data-bs-toggle="tab">JSON</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="parameters_form">
                    <!-- to be populated by jquery -->
                </div>
                <div class="tab-pane" id="parameters_json">
                    {% render_field form.parameters %}
                </div>
            </div>
        </div>
    </div>
    {% include 'inc/extras_features_edit_form_fields.html' %}
{% endblock form %}

{% block javascript %}
    {{ block.super }}
    <script type="text/javascript">
    /* When changing any field in the parameters_form, re-render the JSON in parameters_json */
        function changeProviderParameter() {
            var parameters_value = {};

            $("#parameters_form :input").each(function() {
                var field_key = $(this).attr("id").slice(3);  /* "id_foobar" --> "foobar" */
                parameters_value[field_key] = $(this).val();
            });

            $("#id_parameters").val(JSON.stringify(parameters_value, null, 4));
        };

    /* When changing the parameters_json, update all fields in the parameters_form accordingly */
        function changeProviderJSON() {
            var parameters_as_json = $(this).val();
            var parameters_value;
            try {
                parameters_value = JSON.parse(parameters_as_json);
            } catch (e) {
                alert("JSON is invalid");
                return;
            }

            for (const key of Object.keys(parameters_value)) {
                $("#parameters_form #id_" + key).val(parameters_value[key]);
            }
        };

    /* When changing the selected provider, retrieve and render the provider-specific content to parameters_form */
        function changeProvider() {
            var provider_slug = $("#id_provider").val();

            var parameters_as_json = $("#id_parameters").val();
            var parameters_value;
            try {
                parameters_value = JSON.parse(parameters_as_json);
            } catch (e) {
                parameters_value = {};
            }

            $.ajax({
                url: "{% url 'extras:secret_list' %}" + "provider/" + provider_slug + "/form/",
                method: "GET",
                data: parameters_value,
                context: this,
                success: function(data) {
                    $("#parameters_form").html(data);
                /*
                 * Strip the "name" field from every field in the parameters_form.
                 * These fields are for user convenience only and should not be included when the form is submitted;
                 * removing their name causes them to be omitted as desired.
                 * See also https://github.com/nautobot/nautobot/issues/1335
                 */
                    $("#parameters_form :input").removeAttr("name");

                    $("#parameters_form :input").change(changeProviderParameter);
                },
                error: function() {
                    $("#parameters_form").html("No form available for this provider, use JSON instead");
                },
            });
        };

        $(document).ready(function() {
            $("#id_provider").change(changeProvider);
            changeProvider();
            $("#id_parameters").change(changeProviderJSON);
        });
    </script>
{% endblock javascript %}
